<template>
    <div class="list-manage">
        <!--搜索部分-->
        <div class="list-title">
            <div class="search" ref="search">

                <!--条件-->
                <el-form ref="form" :model="sizeForm" label-width="80px">
                    <el-form-item label="科室1" >
                        <el-input v-model="params.deptName"></el-input>
                    </el-form-item>

                    <el-form-item label="活动区域">
                        <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="活动时间" style="width: 100%">
                        <el-col :span="6">
                            <el-date-picker type="date" placeholder="选择日期" v-model="sizeForm.date1" ></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="1">-</el-col>
                        <el-col :span="6">
                            <el-time-picker placeholder="选择时间" v-model="sizeForm.date2"></el-time-picker>
                        </el-col>
                    </el-form-item>

                    <el-form-item label="活动性质" style="width: 100%">
                        <el-checkbox-group v-model="sizeForm.type">
                            <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
                            <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
                            <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item label="特殊资源" style="width: 66%">
                        <el-radio-group v-model="sizeForm.resource" size="medium">
                            <el-radio border label="线上品牌商赞助"></el-radio>
                            <el-radio border label="线下场地免费"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>

            </div>

            <!--按钮-->
            <div class="search-button">
                <el-button type="primary" size="small" @click="reset(params,sizeForm)">重置</el-button>
                <el-button type="primary" size="small" @click="search(params,url)">查询</el-button>
                <el-button type="primary" size="small">新增</el-button>
            </div>
        </div>

        <div class="list">

            <!--使用列表组件-->
            <list-content
                @handlerProxy="handlerProxy"

                :tableData="tableData"
                :ifOptColumn="ifOptColumn"
                :optColumnFunc="optColumnFunc"
                :tabelColumTitle="tabelColumTitle"

                :searchHeight="searchHeight"

                :params="params"
                :url="url"

                ref = "listContent"
            ></list-content>

        </div>
    </div>
</template>

<script>
    import moment from "moment";
    import ListContent from "../content/ListContent";

    export default {
        name: "PersonManageList",
        data(){
            return {
                // 查询参数
                params:{
                    deptName:"",
                    realName:"",
                    duty:"",
                },

                // 列表名称参数
                tabelColumTitle:[
                    {
                        "prop":"realName",
                        "label":"姓名",
                        "width":"150",
                        "headerAlign":"center",
                    },
                    {
                        "prop":"idCard",
                        "label":"身份证号",
                        "width":"150",
                        "headerAlign":"center",
                        "align":"center",
                    },
                    {
                        "prop":"sex",
                        "label":"性别",
                        "width":"50",
                        "headerAlign":"center",
                        "align":"center",
                    },
                    {
                        "prop":"deptName",
                        "label":"科室",
                        "width":"150",
                        "headerAlign":"center",
                        "align":"center",
                    },
                    {
                        "prop":"duty",
                        "label":"职务",
                        "width":"100",
                        "headerAlign":"center",
                        "align":"center",
                    },
                    {
                        "prop":"companyName",
                        "label":"所属单位",
                        "width":"300",
                        "headerAlign":"center",
                        "align":"center",
                    },
                    {
                        "prop":"createTime",
                        "label":"创建时间",
                        "width":"100",
                        "headerAlign":"center",
                        "align":"center",
                        "formatter":this.formatDate
                    },
                ],

                // 是否需要操作列sdf
                ifOptColumn:true,
                // 操作列对应的方法和参数
                optColumnFunc:[
                    {
                        methodName:"view",
                        methodLabel:"查看 ",
                        type:'text',
                        size:'small'
                    },
                    {
                        methodName:"edit",
                        methodLabel:"编辑",
                        type:'text',
                        size:'small'
                    }
                ],
                url:"sup/personRest/monitorManagePage",
                // 列表具体数据
                tableData:[],
                // 列高的默认值
                searchHeight:40,

                sizeForm: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            }
        },
        created() {
            // this.init();
        },
        components:{
            "list-content":ListContent
        },
        mounted() {
            // 获取搜索组件页的高度 边框有一个高度
            this.searchHeight = this.$refs.search.offsetHeight + 1;
        },

        methods:{
            view(row){
                alert("查看");
            },
            edit(row){
                alert("编辑");
            },
            // 对应的格式化方法（用来传递到后台）
            formatDate(row, column, cellValue, index){
                return moment(cellValue).format("YYYY-MM-DD");
            },

            // 框架的搜索方法，不可删除
            search(){
                this.$refs.listContent.init(this.params,this.url);
            },
            // 框架方法，用来统一调用操作栏的方法
            handlerProxy(row, methodName) {
                console.log(this);
                let func = eval("this." + methodName);
                func(row);
            },
        }
    }
</script>

<!--当前文件去掉scoped，确保全局样式，否则el的动态元素样式无法渲染-->
<style lang="scss">
    @import '../../../styles/list.scss'; // 全局自定义的css样式
</style>
